import React, { Component, Fragment } from 'react';
import { Card, Descriptions, Image, Button } from 'antd'
import { connect } from 'dva';
import constant from '../../constant/constant'

class SignVerificationAgreementPage extends Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        this.props.dispatch({
            type: "application/getVerificationAgreement",
            data: {verificationApplicationId:this.props.verification.technologyId}
        })
    }

    renderNextButton = verificationAgreement => {
        if(verificationAgreement){
            return(
                <Button style={{marginTop:20}} type='primary' onClick={this.goToNextProcess}>下一步</Button>
            )
        }
    }

    goToNextProcess = () => {
        this.props.dispatch({
            type:"application/goToNextProcess",
            data:{
                verificationApplicationId:this.props.verification.technologyId
            }
        })
    }

    render() {
        return (
            <Fragment>
                <Descriptions title="签订验证协议" bordered={true}>
                    <Descriptions.Item label="技术名称">{this.props.verification.verificationAgreement.technologyName}</Descriptions.Item>
                    <Descriptions.Item label="验证机构">{this.props.verification.verificationAgreement.mechanismName}</Descriptions.Item>
                    <Descriptions.Item label="验证机构联系方式">{this.props.verification.verificationAgreement.phone}</Descriptions.Item>
                    <Descriptions.Item label="验证协议">{this.props.verification.verificationAgreement.verificationAgreement == null ? "验证机构暂未上传" : <a href={constant.serverUrl+constant.fileUrl.mechanismUrl+this.props.verification.verificationAgreement.verificationAgreement}>{this.props.verification.verificationAgreement.verificationAgreement}</a>}</Descriptions.Item>
                    <Descriptions.Item label="申请者">{this.props.verification.verificationAgreement.companyName}</Descriptions.Item>
                    <Descriptions.Item label="申请者联系方式">{this.props.verification.verificationAgreement.phone}</Descriptions.Item>
                </Descriptions>
                {this.renderNextButton(this.props.verification.verificationAgreement.verificationAgreement)}
            </Fragment>
        )
    }
}

const mapStateToProps = state => {
    let verification = state.application.verification
    return {
        verification
    }
}

export default connect(mapStateToProps)(SignVerificationAgreementPage)